<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"
			type="application/javascript"></script>
		<link rel="stylesheet" href="https://layui.11dz.cn/layui-v2.6.8/layui/css/layui.css">
		<script src="https://layui.11dz.cn/layui-v2.6.8/layui/layui.js"></script>
		<style>
			table,
			tr {
				width: 100%;
			}

			td {
				word-wrap: break-word;
				word-break: normal;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<input type="number" class="layui-input" v-model="limit">
			<table class="layui-table">
				<tr v-for="(item,index) in info" v-show="item.value.length<limit">
					<td>{{index}}</td>
					<td>{{item.key}}</td>
					<td>{{item.value}}</td>
					<td><input type="text" class="layui-input" v-model="item.value"><button @click="change(item.key,item.value)"
							class="layui-btn layui-btn-sm layui-btn-normal">修改</button></td>
				</tr>
			</table>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					info: "",
					limit:100
				},
				methods: {
					change(key,value) {
						localStorage.setItem(key,value)
					}
				},
				created() {
					localStorage.__proto__.toArray = function() {
						let re = []
						for (let i = 0; i < this.length; i++) {
							let key = this.key(i); //获取本地存储的Key
							let value = this.getItem(key)
							re.push({
								key,
								value
							})
						}
						return re
					}
					this.info = localStorage.toArray()
				},
			});
		</script>
	</body>

</html>
